import * as Cesium from "cesium";
import type { FixedLengthArray } from "@utils";

export interface DrawPointPictureType {
  position: FixedLengthArray<number, 3>;
  image: string;
  width: number;
  height: number;
  scale?: number;
  color?: FixedLengthArray<number, 4>;
  pixelOffset?: FixedLengthArray<number, 2>;
  label?: string;
  labelStyle?: {
    font?: string;
    fillColor?: string;
    pixelOffset?: FixedLengthArray<number, 2>;
    backgroundColor?: FixedLengthArray<number, 4>;
  };
  data?: any;
}
// 绘制点图片标注
class DrawPointPicture {
  #viewer: Cesium.Viewer;
  #position: FixedLengthArray<number, 3>;
  #color: FixedLengthArray<number, 4>;
  #pixelOffset: FixedLengthArray<number, 2>;
  #image: string;
  #width: number;
  #height: number;
  #scale: number;
  data: any;
  entity: (Cesium.Entity & { data?: any; _node?: any }) | null;
  #handler: Cesium.ScreenSpaceEventHandler | null;
  #label: string;
  #labelStyle: {
    font?: string;
    fillColor?: string;
    pixelOffset?: FixedLengthArray<number, 2>;
    backgroundColor?: FixedLengthArray<number, 4>;
  };

  constructor(viewer: Cesium.Viewer, options: DrawPointPictureType) {
    this.#viewer = viewer;
    this.#position = options.position;
    this.#image = options.image;
    this.#width = options.width;
    this.#height = options.height;
    this.#pixelOffset = options.pixelOffset || [0, -12];
    this.data = options.data;
    this.#scale = options.scale || 1;
    this.#color = options.color || [1, 1, 1, 1];
    this.entity = null;
    this.#label = options.label || "";
    this.#labelStyle =
      options.labelStyle ||
      {
        // backgroundColor: [1, 1, 1, 1],
        // fillColor: [1, 1, 1, 1],
        // pixelOffset: [0, 0],
      };
    this.#handler = new Cesium.ScreenSpaceEventHandler(
      this.#viewer.scene.canvas
    );
    this.#init();
  }

  #init() {
    this.entity = this.#viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(...this.#position),
      billboard: {
        image: this.#image,
        width: this.#width,
        height: this.#height,
        scale: this.#scale,
        pixelOffset: new Cesium.Cartesian2(
          this.#pixelOffset[0],
          this.#pixelOffset[1]
        ),
        color: Cesium.Color.fromBytes(
          this.#color[0] * 255,
          this.#color[1] * 255,
          this.#color[2] * 255,
          this.#color[3] * 255
        ),
      },
      label: {
        text: this.#label,
        font: this.#labelStyle.font,
        // fillColor: Cesium.Color.fromBytes(
        //   this.#labelStyle.fillColor![0] * 255,
        //   this.#labelStyle.fillColor![1] * 255,
        //   this.#labelStyle.fillColor![2] * 255,
        //   this.#labelStyle.fillColor![3] * 255,
        // )
        // pixelOffset: this.#labelStyle.pixelOffset!,
        // backgroundColor: Cesium.Color.fromBytes(
        //   this.#labelStyle.backgroundColor![0] * 255,
        //   this.#labelStyle.backgroundColor![1] * 255,
        //   this.#labelStyle.backgroundColor![2] * 255,
        //   this.#labelStyle.backgroundColor![3] * 255
        // ),
      },
    });
    this.entity.data = this.data;
    this.entity._node = this;
  }
  click(_e: any, _data?: any) {}
  // // 鼠标移入
  // mouseEnter(_e: any, _data?: any) {}
  // // 鼠标移出
  // mouseLeave(_e: any, _data?: any) {}
  setShow(show: boolean) {
    this.entity!.show = show;
  }
  update(options: any) {}
  destroy() {
    if (this.entity) {
      this.#viewer.entities.remove(this.entity);
      this.entity = null;
    }
  }
}

// 绘制聚合点图片
class DrawPolymerizationPointPicture {}
export { DrawPointPicture, DrawPolymerizationPointPicture };
